<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工出差管理系统</title>

    <style>
        tr:nth-child(odd) {
            background-color: grey;
        }
    </style>
</head>
<body>
<div style="text-align: center; margin: auto">
    <h1>员工出差管理系统</h1>
    <form method="get" th:action="|@{#request.contextPath}/list|">
        <p>
            <select name="tripModeId">
                <option value="">--请选择--</option>
                <option value="1">公共交通</option>
                <option value="2">高铁</option>
                <option value="3">飞机</option>
                <option value="4">公司派车</option>
                <option value="5">自驾</option>
                <option value="6">其他</option>
            </select>
        </p>
        <input type="submit" value="查询"/>
        <input th:type="button" th:onclick="add()" value="添加"/>
    </form>
    <br>
    <table border="1" style="text-align: center; margin: auto">
        <tr>
            <td>出差人员</td>
            <td>职位</td>
            <td>出行方式</td>
            <td>出行日期</td>
            <td>行程状态</td>
            <td>操作</td>
        </tr>

        <tr th:each="sysUser : ${list}">
            <td th:text="${sysUser.userName}"></td>
            <td th:text="${sysUser.duty}"></td>
            <td th:switch="${sysUser.tripModeId}">
                <span th:case="1">公共交通</span>
                <span th:case="2">高铁</span>
                <span th:case="3">飞机</span>
                <span th:case="4">公司派车</span>
                <span th:case="5">自驾</span>
                <span th:case="6">其他</span>
            </td>
            <td th:text="${#dates.format(sysUser.departTime, 'yyyy-MM-dd')}"></td>
            <td th:switch="${sysUser.status}">
                <span th:case="0">未出行</span>
                <span th:case="1">已取消</span>
            </td>
            <td>
                <a th:onclick="|del(${sysUser.id})|">删除</a>
                <a th:href="@{/update(id=${sysUser.id},status=${sysUser.status==0?1:0})}">取消行程</a>
            </td>
        </tr>
    </table>
</div>

<script th:src="@{/js/jquery.js}"></script>

<script th:inline="javascript">
    var contextPath = ""+[[${#request.contextPath}]];

    $(function (){
        console.log(contextPath)
    })

    function del(id) {
        let con = confirm("确定要删除" + id + "吗?")
        if (con) {
            location.href = 'delete?id=' + id;
        }
    }

    function add() {

        location.href = contextPath+'/add';

    }

</script>

</body>
</html>